<template>
	<view class="myWallets">
		<view class="myWallet__heard" :style="{height: `${search.top+search.height}px`}">
			<view class="myWallet__leftLogoBox" @click="goBack">
				<image src="/static/images/leftIcon.png"
					:style="{height: `${search.height}px`,width: `${search.height}px`}"></image>
			</view>
			<view class="myWallet__title"
				:style="{top: `${search.top}px`,height: `${search.height}px`,lineHeight: `${search.height}px`}">提现
			</view>
		</view>

		<view class="myWallet__main" v-if="isShowBox">
			<view class="myWallet__bodyTop">
				<view class="myWallet__bodyTopTitle">
					<span>提现金额</span>
					<span>当前余额{{walletMoney}}元</span>
				</view>
				<view class="myWallet__bodyTopTitles">
					<span>¥<input class="myWallet__bodyTopTitlesInpu" v-model="todayWithdrawLimit"></input></span>
					<span @click="todayWithdrawLimit = todayObj.todayWithdrawLimit">最高现额</span>
				</view>
			</view>

			<!-- 账户类型 -->
			<view class="myWallet__bodyTop">
				<view class="myWallet__bodyTopTitless">
					<p>账户类型</p>
					<view calss="myWallet__bodyTopTit">
						<view :class="index==typeIndex ? 'myWallet__bodyTopTitlessxxx' : ''" @click.stop="tagger(index)"
							v-for="(item,index) in typeList" :key="index">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="myWallet__bodyTopTitlessss">
					<view v-for="(item,index) in nowTypeList" :key="index">
						<view>{{item.name}}</view>
						<input class="myWallet__moneyBottonItemValue" :placeholder="item.place" v-model="item.value" />
					</view>
				</view>
			</view>

			<!-- 提示 -->
			<view class="tastText">
				<p>1.提现金额最少100元；</p>
				<p>2.每天最多可提现1000元；</p>
				<p>3.提现24小时内到账，请耐心等待；</p>
				<p>4.有任何疑问请联系客服进行反馈处理。</p>
			</view>
			<view class="buttomText" @click="send">我要提现</view>
		</view>
		
		<!-- 添加成功 -->
		<u-overlay :opacity="0.01" :show="isShowDui">
			<view @click.stop="" class="overlayBox">
				<image src="/static/images/duiIcon.png"></image>
				<span>提现成功，24时内到账，请注意查收</span>
			</view>
		</u-overlay>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				isShowDui: false,
				isShowBox: false,
				todayWithdrawLimit: 0,
				walletMoney: 0,
				todayObj: {
					todayWithdrawMoney: 0, //今天累计提现
					todayWithdrawLimit: 1000, //今天还可提现额度
					withdrawMoneyLeast: 100, //提现最小金额
					withdrawMoneyMax: 1000, //每天提现最大金额
					withdrawMoneyRatio: 0 //提现手续费
				},
				typeIndex: 0,
				typeList: [{
						name: '支付宝',
						arr: [{
								name: '真实姓名',
								place: '请输入您的姓名',
								value: ''
							},
							{
								name: '支付宝',
								place: '请输入提现支付宝账号',
								value: ''
							}
						]
					},
					{
						name: '银行卡',
						arr: [{
								name: '真实姓名',
								place: '请输入您的姓名',
								value: ''
							},
							{
								name: '银行卡号',
								place: '请输入提现银行卡号',
								value: ''
							}
						]
					},

				]
			}
		},
		onLoad() {
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
			this.walletMoney = this.user.walletMoney;
			this.initwxConfig();
			
			this.$api.wxGetOtherSetInfo().then(res=>{
				if(res.code==200){
					this.isShowBox = res.data.pageShow == this.versions ? true : false;
					// uni.setStorageSync('servicePhone',res.data.servicePhone);
				}
			})
		},
		computed: {
			search() {
				return this.$store.state.search;
			},
			versions() {
				return this.$store.state.versions;
			},
			nowTypeList() {
				console.log(this.typeList[this.typeIndex])
				return this.typeList[this.typeIndex].arr
			},
			user() {
				return this.$store.state.user;
			},
		},
		methods: {
			send() {
				let nowList = this.typeList[this.typeIndex].arr;
				if (!this.todayWithdrawLimit) {
					uni.showToast({
						icon: 'none',
						title: `提现金额不能为空`,
						mask: true
					})
					return
				}
				// todayWithdrawLimit
				if (this.todayWithdrawLimit > this.todayObj.todayWithdrawLimit) {
					uni.showToast({
						icon: 'none',
						title: `今日可提现额度：${this.todayObj.todayWithdrawLimit}`,
						mask: true
					})
					return
				}
				let realName = "";
				let bankCardNo = "";

				let zfbAccount = "";
				for (let i = 0; i < nowList.length; i++) {
					let item = nowList[i]
					realName = item.name;
					bankCardNo = item.value;
					zfbAccount = item.value;
					if (item.value == '') {
						uni.showToast({
							icon: 'none',
							title: `${item.name}不能为空`,
							mask: true
						})
						return
					}
				}
				let req = {}
				if (this.typeIndex == 0) {
					req = {
						receiptMethod: this.typeIndex ? 20 : 10,
						withdrawMoney: this.todayWithdrawLimit,
						realName,
						zfbAccount
					}
				} else {
					req = {
						receiptMethod: this.typeIndex ? 20 : 10,
						withdrawMoney: this.todayWithdrawLimit,
						realName,
						bankCardNo
					}
				}

				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.WxApply(req).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.walletMoney = res.data;
						this.isShowDui = true;
						setTimeout(()=>{
							this.isShowDui=false;
						},1000)
						// uni.showToast({
						// 	icon: 'none',
						// 	title: res.msg,
						// 	mask: true
						// });
						this.initwxConfig();

					}
				})


			},
			initwxConfig() {

				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.wxConfig().then(res => {
					console.log(res)
					if (res.code == 200) {
						this.todayObj = res.data;

					}
				})
			},
			goBack() {
				uni.navigateBack()
			},
			tagger(index) {
				this.typeIndex = index;
			}
		}
	}
</script>

<style scoped lang="scss">
	.myWallets {
		min-height: 100vh;
		background-color: #f7f8fc;

		.myWallet__heard {
			width: 100%;
			display: flex;
			position: relative;

		}

		.Action {
			background: #fff1f2 !important;
			border: 4rpx solid #F44B5B !important;
			color: #F44B5B !important;
		}

		.myWallet__leftLogoBox {
			position: absolute;
			bottom: 0;
			left: 0;
			flex: 0 0 140rpx;
			width: 140rpx;
			height: 100%;
			z-index: 99;

			image {
				width: 72rpx;
				height: 72rpx;
				position: absolute;
				bottom: 0;
				left: 32rpx;
			}

		}

		.myWallet__title {
			width: 100%;
			text-align: center;
			position: absolute;
			font-size: 16px;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 22px;
			color: #000000;
		}

		.buttomText {
			width: 622rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #f24858;
			text-align: center;
			opacity: 1;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #FFFFFF;
			margin: 48rpx 32rpx;
			box-shadow: 0 30rpx 39rpx -10rpx #ddd;
		}
		.overlayBox {
			width: 494rpx;
			height: 90rpx;
			background: rgba(0, 0, 0, 0.9);
			border-radius: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			top: 48%;
			left: 50%;
			transform: translate(-50%, -50%);
		
			image {
				display: inline-block;
				width: 34rpx;
				height: 34rpx;
			}
		
			span {
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 34rpx;
				color: #FFFFFF;
				margin-left: 8rpx;
		
			}
		}

		.tastText {
			p {
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 34rpx;
				color: #868896;
			}
		}

		.myWallet__main {
			padding: 32rpx;

		}



		.myWallet__moneyTop {
			display: flex;
			justify-content: space-between;
		}

		.myWallet__bodyTopTitlessss {
			padding: 32rpx;
			padding-top: 0;

			&>view {
				margin-top: 32rpx;

				view {
					margin-bottom: 16rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-family: 蘋方-簡;
					font-weight: normal;
					line-height: 40rpx;
					color: #2B2B33;
				}
			}
		}

		.myWallet__moneyBottonItemValue {
			width: 622rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #f7f8fc;
			opacity: 1;
			border-radius: 32rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			padding: 0 32rpx;
			box-sizing: border-box;
		}

		.myWallet__bodyTopTitlessxxx {}

		.myWallet__bodyTopTitless {
			padding: 32rpx;
			padding-bottom: 8rpx;
			border-bottom: 4rpx solid #eeeff4;

			p {
				height: 40rpx;
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 40rpx;
				color: #2B2B33;
				opacity: 1;
			}

			&>view {
				height: 104rpx;
				display: flex;
				align-items: center;

				&>view {
					display: inline-block;
					height: 80rpx;
					line-height: 76rpx;
					padding: 0 40rpx;
					border: 4rpx solid #eeeff4;
					background-color: #f7f8fc;
					opacity: 1;
					border-radius: 32rpx;
					font-size: 28rpx;
					font-family: 蘋方-簡;
					font-weight: normal;
					margin-right: 24rpx;
					box-sizing: border-box;
					color: #000;
				}
			}
		}

		.myWallet__bodyTopTitlessxxx {
			color: #F0414D !important;
			border: 4rpx solid #F0414D !important;
			background-color: #fff1f2 !important;
		}

		.myWallet__bodyTop {
			width: 686rpx;
			height: 242rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 40rpx rgba(228, 228, 245, 0.4);
			opacity: 1;
			border-radius: 40rpx;
			padding: 32rpx;
			box-sizing: border-box;
		}

		.myWallet__bodyTop:nth-child(2) {
			margin: 20rpx 0;
			width: 686rpx;
			height: 586rpx;
			background: rgba(255, 255, 255, 0.39);
			box-shadow: 0px 0px 40rpx rgba(228, 228, 245, 0.4);
			opacity: 1;
			border-radius: 40rpx;
			padding: 0;
		}

		.myWallet__bodyTopTitle {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			span:nth-child(1) {
				height: 40rpx;
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 40rpx;
				color: #2B2B33;
				opacity: 1;
			}

			span:nth-child(2) {
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 34rpx;
				color: #868896;
				opacity: 1;
			}
		}

		.myWallet__bodyTopTitlesInpu {
			height: 58rpx;
			font-size: 48rpx;
			font-family: DIN;
			font-weight: 500;
			line-height: 58rpx;
		}

		.myWallet__bodyTopTitles {
			height: 122rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 122rpx;
			color: #2B2B33;
			display: flex;
			justify-content: space-between;
			margin-top: 16rpx;
			align-items: center;
			background: #f7f8fc;
			border-radius: 40rpx;
			padding: 0 32rpx;
			box-sizing: border-box;

			span:nth-child(1) {
				height: 58rpx;
				font-size: 48rpx;
				font-family: DIN;
				font-weight: 500;
				line-height: 58rpx;
				color: #000000;
				display: flex;
			}

			span:nth-child(2) {
				height: 40rpx;
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 40rpx;
				color: #F0414D;
				flex: 0 0 120rpx;
			}
		}

		// <view class="myWallet__bodyTop">
		// 	<view class="myWallet__bodyTopTitle">
		// 		<span>我的余额(元)</span>
		// 		<span>¥8888.00</span>
		// 	</view>
		// 	<view class="myWallet__bodyTopTitle">
		// 		<span>待入账(元)</span>
		// 		<span>¥666.00</span>
		// 	</view>
		// </view>



	}

	// <view class="myWallet__main">
	// 	<!-- 提现金额 -->
	// 	<view calss="myWallet__money">
	// 		<view calss="myWallet__moneyTop">
	// 			<span>提现金额</span>
	// 			<span>当前余额8888.00元</span>
	// 		</view>
	// 		<view calss="myWallet__moneyBotton">
	// 			<span>¥1000.00</span>
	// 			<span>最高现额</span>
	// 		</view>
	// 	</view>
	// 	<!-- 账户类型 -->
	// 	<view calss="myWallet__money">
	// 		<view calss="myWallet__moneyTop">
	// 			<p>账户类型</p>
	// 			<view calss="myWallet__moneyTopMain">
	// 				<view calss="myWallet__moneyTopMainItem" v-for="(item,index) in typeList" :key="index">{{item.name}}</view>
	// 			</view>
	// 		</view>
	// 		<view calss="myWallet__moneyBotton">
	// 			<view calss="myWallet__moneyBottonItem"  v-for="(item,index) in typeList[typeIndex].arr" :key="index">
	// 				<p>{{item.name}}</p>
	// 				<input class="myWallet__moneyBottonItemValue" :placeholder="item.place" v-model="item.value"/>
	// 			</view>
	// 		</view>
	// 	</view>

	// 	<!-- 提示 -->
	// 	<view class="tastText">
	// 		<p>1.提现金额最少100元；</p>
	// 		<p>2.每天最多可提现1000元；</p>
	// 		<p>3.提现24小时内到账，请耐心等待；</p>
	// 		<p>4.有任何疑问请联系客服进行反馈处理。</p>
	// 	</view>
	// 	<view class="buttomText">我要提现</view>
	// </view>
</style>
